<template>
	<view class="talk-container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="title-container">
				<text class="logo-icon">📢</text>
				<view class="title-text">
					<text class="main-title">校内论坛</text>
					<text class="sub-title">师生交流互动平台</text>
				</view>
			</view>
		</view>
	
		<!-- 分类导航栏 -->
		<view class="category-nav">
			<scroll-view scroll-x="true" class="scroll-view-x" show-scrollbar="false">
				<view class="category-item active">全部</view>
				<!-- 使用talkList渲染论坛版块数据 -->
				<view class="category-item" v-for="category in talkList" :key="category.id">
					{{ category.name }}
				</view>
			</scroll-view>
		</view>
	
		<!-- 热门帖子区域 -->
		<view class="hot-posts-section">
			<view class="section-header">
				<view class="section-title">
					<text class="hot-icon">🔥</text>
					<text class="section-text">热门帖子</text>
				</view>
				<view class="more-btn" @click="goPublish">发布新帖</view>
			</view>
			
			<!-- 使用forumList渲染热门帖子数据 -->
			<view class="post-list">
				<view class="post-item" v-for="post in forumList" :key="post.id" @click="goDetail(post.id)">
					<view class="post-header">
						<view class="post-category" v-if="post.category">
							<text class="category-icon">📚</text>
							<text>{{ post.category.name || post.category }}</text>
						</view>
					</view>
					<view class="post-content">
						<view class="post-title">{{ post.title }}</view>
						<view class="post-meta">
							<text class="post-author">{{ post.Author.username || '匿名用户' }}</text>
							<text class="post-time">{{ formatDate(post.createdAt) || '刚刚' }}</text>
							<text class="post-category-tag" v-if="post.Category">{{ post.Category.name }}</text>
							
						</view>
					</view>
					<view class="post-stats">
						<view class="stat-item">
							<text class="stat-icon">👍</text>
							<text class="stat-count">{{ post.likeCount || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-icon">👁</text>
							<text class="stat-count">{{ post.viewCount || 0 }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-icon">💬</text>
							<text class="stat-count">{{ post.commentCount || 0 }}</text>
						</view>
					</view>
					<view class="post-actions">
						<view class="delete-btn" @click.stop="deletePost(post.id)">
							<text class="delete-icon">🗑️</text>
							<text class="delete-text">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import http from '../../utils/request';
import { onLoad } from '@dcloudio/uni-app'

const talkList = ref([]);
const forumList = ref([]);

// 格式化日期为年月日
function formatDate(dateString) {
  if (!dateString) return '';
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

function getTalkList() {
	http.get('/api/forum/categories').then(res => {
		console.log(res);
		talkList.value = res.data.data || [];
	})
}

function getForumList() {
	http.get('/api/forum/posts').then(res => {
		console.log(res);
		forumList.value = res.data.data.posts || [];
	})
}

function goDetail(id){
	console.log(id);
	uni.navigateTo({
		url: '/pages/textdetail/textdetail?id=' + id
	})
}

// 跳转到发布新帖页面
function goPublish() {
	// 这里可以根据实际情况跳转到发布页面
	uni.showToast({
		title: '发布新帖功能待实现',
		icon: 'none'
	})
}

// 删除帖子
function deletePost(id) {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这个帖子吗？',
		success: (res) => {
			if (res.confirm) {
				// 显示加载提示
				uni.showLoading({
					title: '删除中...'
				});
				
				// 调用删除接口
				http.delete(`/api/forum/posts/${id}`).then(res => {
					uni.hideLoading();
					if (res.data.success) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						// 重新获取帖子列表
						getForumList();
					} else {
						uni.showToast({
							title: res.data.message || '删除失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.hideLoading();
					console.error('删除帖子失败:', error);
					// 根据错误状态码显示不同的提示
					if (error.response && error.response.status === 403) {
						uni.showToast({
							title: '权限不足，无法删除',
							icon: 'none'
						});
					} else if (error.response && error.response.status === 404) {
						uni.showToast({
							title: '帖子不存在',
							icon: 'none'
						});
						// 重新获取帖子列表
						getForumList();
					} else {
						uni.showToast({
							title: '删除失败，请重试',
							icon: 'none'
						});
					}
				});
			}
		}
	});
}

onLoad(() => {
	getTalkList();
	getForumList();
})
</script>

<style scoped>
/* 全局容器样式 */
.talk-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f8f8f8;
}

/* 顶部标题栏样式 */
.header {
	background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
	padding: 30rpx 0 40rpx 0;
	text-align: center;
	color: white;
}

.title-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.logo-icon {
	font-size: 60rpx;
	margin-bottom: 10rpx;
}

.title-text {
	display: flex;
	flex-direction: column;
}

.main-title {
	font-size: 40rpx;
	font-weight: bold;
}

.sub-title {
	font-size: 24rpx;
	opacity: 0.9;
	margin-top: 6rpx;
}

/* 分类导航栏样式 */
.category-nav {
	background-color: white;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.scroll-view-x {
	white-space: nowrap;
}

.category-item {
	display: inline-block;
	padding: 10rpx 30rpx;
	margin: 0 20rpx;
	font-size: 28rpx;
	color: #666;
	border-radius: 20rpx;
}

.category-item.active {
	background-color: #e6f0ff;
	color: #2575fc;
}

/* 热门帖子区域样式 */
.hot-posts-section {
	padding: 30rpx 20rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	display: flex;
	align-items: center;
}

.hot-icon {
	font-size: 28rpx;
	margin-right: 10rpx;
}

.section-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.more-btn {
  font-size: 26rpx;
  color: #fff;
  background-color: #007aff;
  padding: 6px 15px;
  border-radius: 4px;
  font-weight: 500;
}

/* 帖子列表样式 */
.post-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.post-item {
	background-color: white;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.post-header {
	margin-bottom: 15rpx;
}

.post-category {
	display: inline-flex;
	align-items: center;
	background-color: #f0f7ff;
	padding: 5rpx 15rpx;
	border-radius: 10rpx;
}

.category-icon {
	font-size: 20rpx;
	margin-right: 5rpx;
}

.post-content {
	margin-bottom: 20rpx;
}

.post-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 10rpx;
	line-height: 1.4;
}

.post-meta {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.post-author {
		margin-right: 20rpx;
	}
	
	.post-category-tag {
		color: #666;
		font-size: 22rpx;
		background-color: #f5f5f5;
		padding: 2rpx 10rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
	}

.post-stats {
		display: flex;
		justify-content: flex-start;
		gap: 30rpx;
	}

	.stat-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.stat-icon {
		font-size: 24rpx;
		margin-right: 5rpx;
	}

	.stat-count {
		font-size: 24rpx;
	}
	
	/* 帖子操作按钮样式 */
	.post-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 15rpx;
	}
	
	.delete-btn {
		display: flex;
		align-items: center;
		padding: 5rpx 15rpx;
		font-size: 24rpx;
		color: #ff4d4f;
		border-radius: 8rpx;
		background-color: #fff1f0;
	}
	
	.delete-icon {
		font-size: 24rpx;
		margin-right: 5rpx;
	}
	
	.delete-text {
		font-size: 24rpx;
	}
</style>
